<template>
  <div class="access-container">
    <div class="cyber-border">
      
      <div class="access-dashboard">
        <div class="main-chart">
          <div ref="flowChart" class="chart-container"></div>
        </div>
        <div class="side-panel">
          <el-card class="real-time-card">
            <h3 class="panel-title">实时通行记录</h3>
            <div class="scroll-list">
              <div v-for="(log, index) in currentAccessLogs" :key="index" class="log-item">
                <el-icon :component="log.icon" class="log-icon" />
                <span class="time">{{ log.time }}</span>
                <span class="gate">闸机 {{ log.gate }}</span>
                <span class="type" :style="{color: log.type === '进入' ? '#00ff88' : '#ff003c'}">
                  {{ log.type }}
                </span>
              </div>
            </div>
            <el-pagination
              v-model:current-page="accessCurrentPage"
              :page-size="4"
              :total="accessLogs.length"
              layout="prev, pager, next"
              class="pagination"
              @current-change="handleAccessPageChange"
            />
          </el-card>
          <el-card class="vehicle-card">
            <h3 class="panel-title">车辆通行记录</h3>
            <div class="scroll-list">
              <div v-for="(log, index) in currentVehicleLogs" :key="index" class="log-item">
                <el-icon :component="log.icon" class="log-icon" />
                <span class="time">{{ log.time }}</span>
                <span class="plate">{{ log.plate }}</span>
                <span class="type" :style="{color: log.type === '进入' ? '#00ff88' : '#ff003c'}">
                  {{ log.type }}
                </span>
              </div>
            </div>
            <el-pagination
              v-model:current-page="vehicleCurrentPage"
              :page-size="4"
              :total="vehicleLogs.length"
              layout="prev, pager, next"
              class="pagination"
              @current-change="handleVehiclePageChange"
            />
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import * as echarts from 'echarts'
import { CircleCheck, CircleClose } from '@element-plus/icons-vue'

const flowChart = ref(null)
const accessCurrentPage = ref(1)
const vehicleCurrentPage = ref(1)

const accessLogs = ref([
  { time: '08:30:45', gate: 'A1', type: '进入', icon: CircleCheck },
  { time: '08:31:12', gate: 'B2', type: '离开', icon: CircleClose },
  { time: '08:35:00', gate: 'C3', type: '进入', icon: CircleCheck },
  { time: '08:40:22', gate: 'D4', type: '离开', icon: CircleClose },
  { time: '08:45:30', gate: 'E5', type: '进入', icon: CircleCheck },
  { time: '08:50:10', gate: 'F6', type: '离开', icon: CircleClose },
  { time: '08:55:15', gate: 'G7', type: '进入', icon: CircleCheck },
  { time: '09:00:20', gate: 'H8', type: '离开', icon: CircleClose },
])

const vehicleLogs = ref([
  { time: '08:32:10', plate: '粤B12345', type: '进入', icon: CircleCheck },
  { time: '08:33:22', plate: '粤A67890', type: '离开', icon: CircleClose },
  { time: '08:36:45', plate: '粤C54321', type: '进入', icon: CircleCheck },
  { time: '08:39:10', plate: '粤D09876', type: '离开', icon: CircleClose },
  { time: '08:42:30', plate: '粤E11223', type: '进入', icon: CircleCheck },
  { time: '08:44:50', plate: '粤F44556', type: '离开', icon: CircleClose },
  { time: '08:47:25', plate: '粤G78901', type: '进入', icon: CircleCheck },
  { time: '08:50:40', plate: '粤H23456', type: '离开', icon: CircleClose },
])

const currentAccessLogs = computed(() => {
  const start = (accessCurrentPage.value - 1) * 4
  return accessLogs.value.slice(start, start + 4)
})

const currentVehicleLogs = computed(() => {
  const start = (vehicleCurrentPage.value - 1) * 4
  return vehicleLogs.value.slice(start, start + 4)
})

const handleAccessPageChange = (page) => {
  accessCurrentPage.value = page
}

const handleVehiclePageChange = (page) => {
  vehicleCurrentPage.value = page
}

onMounted(() => {
  const chart = echarts.init(flowChart.value)
  const hours = Array.from({length: 24}, (_, i) => `${String(i).padStart(2, '0')}:00`)
  const data = Array.from({length: 24}, () => Math.floor(Math.random() * 50) + 10)
  
  chart.setOption({
    backgroundColor: '#001f3f',
    title: {
      text: '24小时通行流量统计',
      textStyle: { 
        color: '#00f7ff',
        fontSize: 18,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: hours,
      axisLine: { lineStyle: { color: '#00f7ff' } },
      axisLabel: { 
        color: '#00f7ff',
        interval: 2
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#00f7ff' } },
      axisLabel: { color: '#00f7ff' },
      splitLine: {
        lineStyle: {
          color: 'rgba(0,247,255,0.1)'
        }
      }
    },
    series: [
      {
        name: '通行人数',
        type: 'bar',
        data: data,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#00ff88' },
            { offset: 1, color: '#00f7ff' }
          ])
        }
      }
    ]
  })
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    chart.resize()
  })
})
</script>

<style lang="scss" scoped>
.access-container {
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  background: #001f3f;
  color: #00f7ff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 247, 255, 0.1);
    border-radius: 4px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #00f7ff;
    border-radius: 4px;
    
    &:hover {
      background: #00ff88;
    }
  }
}

.cyber-title {
  color: #00f7ff;
  font-size: 24px;
  margin-bottom: 20px;
  text-shadow: 0 0 10px #00f7ff;
}

.panel-title {
  color: #00f7ff;
  font-size: 18px;
  margin-bottom: 15px;
  text-shadow: 0 0 5px #00f7ff;
}

.access-dashboard {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  min-height: 0;
}

.main-chart {
  background: rgba(32, 40, 72, 0.8);
  border: 1px solid rgba(64, 158, 255, 0.3);
  padding: 20px;
  height: calc(100vh - 100px);
  
  .chart-container {
    width: 100%;
    height: 100%;
    background: #001f3f;
  }
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: calc(100vh - 100px);
}

.real-time-card, .vehicle-card {
  flex: 1;
  background: rgba(32, 40, 72, 0.8);
  border: 1px solid rgba(64, 158, 255, 0.3);
  
  .scroll-list {
    height: calc(100% - 80px) !important;
    overflow-y: auto;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(0, 247, 255, 0.1);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #00f7ff;
      border-radius: 3px;
      
      &:hover {
        background: #00ff88;
      }
    }
  }
}

.log-item {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  align-items: center;
  padding: 10px;
  margin: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  font-size: 0.9em;
  transition: all 0.3s;
  
  .time, .gate, .plate {
    color: #00f7ff;
  }
  
  &:hover {
    transform: scale(1.02);
    background: rgba(0,247,255,0.1);
  }
}

.log-icon {
  font-size: 1.2em;
  margin-right: 10px;
  color: #00f7ff;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pagination {
  margin-top: 15px;
  text-align: center;
  
  :deep(.el-pagination) {
    --el-pagination-text-color: #00f7ff;
    --el-pagination-hover-color: #00ff88;
    --el-pagination-button-color: #00f7ff;
    --el-pagination-button-bg-color: #00d9fffd;
    --el-pagination-button-disabled-color: #409eff;
    --el-pagination-button-disabled-bg-color: transparent;
    --el-pagination-hover-bg-color: rgba(0,247,255,0.1);
  }
}
</style> 